<%@ page contentType="text/html;charset=UTF-8" language="java"
	pageEncoding="utf-8"%>
<%@ include file="../include/head.jsp"%>
<%@ include file="../include/top.jsp"%>
<%@ include file="../include/left.jsp"%>
<div class="main-content">

	<%@ include file="../include/navigate.jsp" %>
	
	<div class="container">
		<div class="widget-box">
			<div class="widget-box-header">
				<div class="col-sm-2">
					<div class="title">
						<i class="icon-edit">&nbsp;</i>修改用户
					</div>
				</div>
			</div>
			<div class="widget-box-content" style="padding: 15px;">
				<c:if test="${not empty message}">
					<div class="alert alert-danger" role="alert">${message}</div>
				</c:if>
				<div id="saveStatus"></div>
				<form class="form-horizontal" role="form" onsubmit="return check()"
					action="${pageContext.request.contextPath}/user/editProfile" method="post">
					<input type="hidden" name="id" value="${user.id}" />
					<div class="form-group">
						<label class="col-sm-2 control-label">用户名称:</label>

						<div class="col-sm-3">
							<input type="text" class="form-control" name="username"
								placeholder="用户名称" data-toggle="tooltip" data-placement="left" readonly="true"
								value="${user.username}" required>
						</div>
					</div>

					<div class="form-group">
						<label class="col-sm-2 control-label">邮箱:</label>

						<div class="col-sm-3">
							<span class="input-icon input-icon-right" style="width:100%;">
								<input class="input-mask-email" type="text" id="form-field-icon-2" style="width:100%;" name="email" value="${user.email}" required> 
								<!-- <i class="ace-icon fa fa-envelope"></i> -->
							</span>
						</div>
						
						<div class="col-sm-2" id="email_tips" style="color:#D16E6C;" hidden="true" >请填写正确的邮箱格式!</div>

					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">联系电话:</label>

						<div class="col-sm-3">
							<span class="input-icon input-icon-right" style="width:100%;">
								<input class="input-mask-phone" type="text" name="phone" style="width:100%;" value="${user.phone}" required />
								<!-- <i class="ace-icon fa fa-phone"></i> -->
							</span>
						</div>
						
						<div class="col-sm-2" id="phone_tips" style="color:#D16E6C;" hidden="true">请填写正确的电话号码!</div>

					</div>

					<div class="form-group">
						<label class="col-sm-2 control-label"></label>

						<div class="col-sm-2">
							<button type="button" class="btn btn-success" onclick="submitUserData()">提交</button>
							<a type="button" class="btn btn-primary"
								href="${pageContext.request.contextPath}/main"> 返回主页
							</a>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div style="position: fixed; bottom: 0px; width: 100%;" align="center">
			<%@ include file="../include/footer.jsp"%>
		</div>
	</div>
	
<script type="text/javascript">
	$('.input-mask-phone').inputmask('99999999999', {
		onincomplete : function() {
			$('#phone_tips').prop("hidden", false);
		},
		oncomplete : function() {
			$('#phone_tips').prop("hidden", true);
		}
	});
	$('.input-mask-email').inputmask("email", {
		onincomplete : function() {
			$('#email_tips').prop("hidden", false);
		},
		oncomplete : function() {
			$('#email_tips').prop("hidden", true);
		}
	});

	function check() {
		if(!$('.input-mask-email').inputmask("isComplete")){
			$('#email_tips').prop("hidden", false);
			return false;
		}
		if (!$('.input-mask-phone').inputmask("isComplete")){
			$('#phone_tips').prop("hidden", false);
			return false;
		}
		
		return true;
	}
	
	window.submitUserData = function(){
		
		if(!check()){
			return false;
		}
		
		$.ajax({
			type : 'post',
			url : '/user/editProfile',
			data : {
				"id" : $("input[name='id']").val(),
				"email": $("input[name='email']").val(),
				"phone" : $("input[name='phone']").val(),
			},
			cache : false,
			dataType : 'json',
			success : function(data) {
				if(data == 'success'){
					operationSuccess();
				} else {
					operationFailedWithMessage(data);
				}
				
			},
			error : function() {
				operationFailed();
			}
		});
	}
</script>

	<%@ include file="../include/bottom.jsp"%>